<template>
	<view class="model clearFix">
		<!-- 机房概览组件，可以根据全局变量值不同进行切换 -->
		<view class="isLoading" v-if="isLoading">
			<u-loading mode="circle" size="50"></u-loading>
		</view>
		<template v-if="showDeviceList.length > 0">
			<view class="clearFix" style="margin-bottom: 30rpx;">
				<view :style="{'width':isList ? '100%':'50%'}" class="device-item" v-for="(item,index) in showDeviceList" :key="index"
				 @tap="goDevice(item,className)">
					<view :class="['deviceIcon']" :style="{
							'background-image':'url('+ $classNameUrl(className) +')'
						}">
						<view :class="['alarm-dot','alarmLevel'+item.r2]" v-if="item.r2>0"></view>
					</view>
					<view class="device-des">
						<text class="title">{{item.r1}}</text>
						<text :class="[item.r2>0?'danger-des':'nomal-des']">{{item.r3}}</text>
					</view>
					<!-- 右箭头 -->
					<u-icon name="arrow-right" color="#212c67" size="28" class="right-icon" v-show="isList"></u-icon>
				</view>
				<view class="noData" v-if="showDeviceList.length == 0">
					<text>暂无数据</text>
				</view>
			</view>
		</template>
		<view class="page-next" v-if="total > 0">
			<onion-pagination style="justify-content: center;" :page.sync="page" :pageSize="pageSize" :total="total" @changePage="updatePage"></onion-pagination>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			isList: {
				type: Boolean,
				default: () => {
					return false
				}
			},
			obj: {
				type: Object,
				default: () => {
					return {}
				}
			},
			roomId:{
				type:String,
				default:()=>"",
				required:true
			},
			className:{
				type:String,
				default:()=>"",
			}
		},
		data() {
			return {
				isLoading:false,
				showDeviceList: [],
				page:1,
				pageSize:10,
				total:0
			}
		},
		methods: {
			updatePage(val){
				if(this.page == val) return;
				this.page = val;
				this.getData()
			},
			goDevice(item,className) {
				this.routerToUrl(className,item)
			},
			routerToUrl(val,item) { //根据类名跳转不同的详情页面
				switch (val) { 
					case "kong"://空气开关 airSwitch.vue
						uni.navigateTo({
							url: "/pages/airSwitch/airSwitch?item="+JSON.stringify(item),
							success() {
								this.$store.commit("set_machineClassShow",false);
							}
						})
						break;
					case "pdg":
						uni.navigateTo({
							url: `/pages/powerDetail/powerDetail?suId=${item.suId}&deviceId=${item.deviceId}&deviceType=${this.obj.r1}`,
							success:()=>{
								this.$store.commit("set_machineClassShow",false)
							}
						})
						break;
					case "ups": case "ups-dx": case "ups-sx":
						uni.navigateTo({
							url: `/pages/upsDetail/upsDetail?suId=${item.suId}&deviceId=${item.deviceId}&deviceType=${this.obj.r1}`,
							success:()=>{
								this.$store.commit("set_machineClassShow",false)
							}
						})
						break;
					case "yg":
						uni.navigateTo({
							url: `/pages/smokeDetail/smokeDetail?suId=${item.suId}&deviceId=${item.deviceId}&deviceType=${this.obj.r1}&alarmLevel=${item.r2}`,
							success:()=>{
								this.$store.commit("set_machineClassShow",false)
							}
						})
						break;
					case "mj":
						uni.navigateTo({
							url: `/pages/doorDetail/doorDetail?suId=${item.suId}&deviceId=${item.deviceId}&deviceType=${this.obj.r1}&alarmLevel=${item.r2}&name=${item.r1}`,
							success:()=>{
								this.$store.commit("set_machineClassShow",false)
							}
						})
						break;
					case "xdc": //电池组
						uni.navigateTo({
							url: `/pages/cellDetail/cellDetail?suId=${item.suId}&deviceId=${item.deviceId}&deviceType=${this.obj.r1}&alarmLevel=${item.r2}`,
							success:()=>{
								this.$store.commit("set_machineClassShow",false)
							}
						})
						break;
					case "ls":
						uni.navigateTo({
							url: `/pages/louShuiDetail/louShuiDetail?suId=${item.suId}&deviceId=${item.deviceId}&deviceType=${this.obj.r1}&alarmLevel=${item.r2}`,
							success:()=>{
								this.$store.commit("set_machineClassShow",false)
							}
						})
						break;
					case "hw": case "hw-bgzj":
						uni.navigateTo({
							url: `/pages/redLineDetail/redLineDetail?suId=${item.suId}&deviceId=${item.deviceId}&deviceType=${this.obj.r1}`,
							success:()=>{
								this.$store.commit("set_machineClassShow",false)
							}
						})
						break;
					case "wsd":
						uni.navigateTo({
							url: `/pages/wsdDetail/wsdDetail?suId=${item.suId}&deviceId=${item.deviceId}&deviceType=${this.obj.r1}&alarmLevel=${item.r2}`,
							success:()=>{
								this.$store.commit("set_machineClassShow",false)
							}
						})
						break;
					case "jmkt": case "ptkt":
						uni.navigateTo({
							url: `/pages/airConditionerDetail/index?suId=${item.suId}&deviceId=${item.deviceId}&deviceType=${this.obj.r1}`,
							success:()=>{
								this.$store.commit("set_machineClassShow",false)
							}
						})
						break;
				}
			},
			getData(){
				this.isLoading = true;
				this.$http.httpRequest({
					url: this.$api.deviceListData,
					data:{
						roomId:this.roomId,
						smallType:this.obj.r1,
						pageNo:this.page,
						pageSize:this.pageSize,
						
					},
					methods:"get",
					abort:true //可中断后续请求
				}).then((res)=>{
					this.isLoading = false;
					if(!res){
						this.showDeviceList = []
						return uni.showToast({
							title:"服务器请求异常",
							icon:"none"
						})
					}
					this.total = res.data.deviceList.total;
					this.showDeviceList = res.data.deviceList.list
				}).catch((err)=>{
					if(err.errMsg != "request:fail abort"){
						this.isLoading = false;
						uni.showToast({
							title:"服务器请求失败",
							icon:"none"
						})
					}
				})
			}
		},
		mounted() {
			this.getData();
		}
	}
</script>

<style scoped lang="scss">
	.model {
		width: 100%;
		position: relative;
		.isLoading{
			text-align: center;
			position: absolute;
			top: 120rpx;
			width: 100%;
			z-index: 20;
		}
		.page-next{
			padding-bottom: 30rpx;
		}
		.noData{
			text-align: center;
			color: #999;
		}
		.device-item {
			float: left;
			display: flex;
			height: 160rpx;
			align-items: center;
			// padding: 0 12rpx;
			position: relative;
			overflow: hidden;

			.right-icon {
				position: absolute;
				right: 0rpx;
				top: 50%;
				transform: translateY(-50%);
			}

			.device-des {
				display: flex;
				flex-direction: column;
				padding-left: 22rpx;
				position: relative;
				z-index: 30;
				flex-grow: 1;
				width: 70%;
			}

			.title {
				font-size: 26rpx;
				margin-bottom: 16rpx;
				width: 188rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.danger-des,
			.nomal-des {
				font-size: 21rpx;
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				
			}

			.danger-des {
				color: $dangerColor;
			}

			.nomal-des {
				color: $defaultColor;
			}

			.deviceIcon {
				width: 64rpx;
				height: 55rpx;
				background-repeat: no-repeat;
				background-size: contain;
				background-position: 50% 50%;
				position: relative;

				.alarm-dot {
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					// background-color: $dangerColor;
					position: absolute;
					top: 0;
					right: 0;
					transform: translate(50%, -50%);
				}
			}
		}
	}
</style>
